<template>
	<view>
		<view class="margin-sm " style="padding-bottom: 140rpx;padding-top: 10rpx;">

			<!-- 轮播图 -->
			<view>
				<swiper circular :interval="3000" style="height: 350rpx" :current="current" :duration="400"
					@change="change">
					<swiper-item @click="swiperClick(item)" v-for="(item ,index) in imgList" :key="index" class="radius"
						style="position: fixed;">
						<image :src="item.url" id="imageToAnalyze" style="width: 100%;height: 350rpx;z-index: 1;"
							class="radius">
						</image>
						<text class="gundongtxt">{{item.text}}</text>
					</swiper-item>
				</swiper>
			</view>
			<!-- 公告 -->
			<view class=" radius bg-white margin-top-sm">
				<view>
					<uni-notice-bar single show-icon scrollable :text="gonggao"></uni-notice-bar>
				</view>
			</view>

			<!-- 关注公众号 -->
			<view class=" radius bg-white margin-top-sm  padding-sm" style="display: flex;" @click="showGongzhonghao">

				<view style="width: 100rpx;">
					<view style="width: 100rpx;height: 100rpx;border-radius: 50%;border:#999 1px solid"
						class="radius bg-grey2">
						<image :src="globalConfig.appInfo.logo"
							style="width: 100rpx;height: 100rpx;border-radius: 50%;border:#999 1px solid">
						</image>
					</view>
				</view>
				<view style="flex: 2;" class="margin-left-sm">
					<view>关注木仓野公众号</view>
					<view style="color: #999;" class="font-12 margin-top-sm">获得最新的活动提示</view>
				</view>
				<view style="flex: 1;" class="juzhong">
					<button class="login-btn cu-btn block bg-olive" style="font-size: 26rpx;">查看</button>
				</view>
			</view>
			<!-- 近期活动 -->
			<view class=" radius bg-white margin-top-sm  padding-sm ">
				<view class="menu-list  padding-xs">
					<view class="list-cell list-cell-arrow radius">
						<view class="menu-item-box">
							<view>往期活动</view>
							<view class="text-right font-12">查看更多</view>
						</view>
					</view>
				</view>
				<scroll-view class="scroll-view_H" scroll-x="true">
					<view class="scroll-view-item_H margin-right-sm" @click="wangqihuodong(item)"
						v-for="(item ,index) in wangqihuodongList">
						<view style="width: 150rpx;height: 150rpx;display: flex;">
							<image :src="item.imgs.split(',')[0]" class="radius scroll-view-item_H"
								style="width: 150rpx;height: 150rpx;">
							</image>
							<text class="gundongtxt2" style="font-size: 20rpx;">{{item.date}}</text>
						</view>

						<text class="font-12" style="height: 12rpx;">{{item.title}}</text>
					</view>
				</scroll-view>
			</view>

			<view class=" radius bg-white margin-top-sm">
				<uni-search-bar placeholder="搜索院子名称/标签" @blur="blur">
				</uni-search-bar>
			</view>
			<!-- 院子列表 -->
			<view class="margin-top-sm ">
				<view v-for="(item,index) in roomList" @click="yuanzixiangqing(item)" :key="index"
					class="padding-sm bg-white margin-top-sm radius">
					<roomMJ :data="item"></roomMJ>
				</view>
			</view>



		</view>

	</view>
</template>

<script>
	import {
		listByDistance10,
		getoptionsList
	} from "@/api/shop/shopconfig/ShopConfigManagementApi.js"
	import {
		isNull
	} from '../utils/validate'
	import {
		getLocation
	} from '@/utils/map'
	export default {
		data() {
			return {
				globalConfig: getApp().globalData.config,
				gonggao: "加载中",
				roomList: [],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				qroomList: {
					title: null,
					lat: null,
					lon: null,
				},
				swiperDotIndex: 0,
				imgList: [],
				wangqihuodongList: [],
				current: 0,
				mode: 'node',
				list: [],
				location: {
					address: "加载中..."
				},
				currentShop: null,
			}
		},
		onShow() {
			this.listByDistance10()

		},
		onLaunch() {

		},
		onLoad() {
			this.init()
		},
		methods: {
			longpressEvent() {
				// 从相册选择6张图
				uni.chooseImage({
					count: 6,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						// 预览图片
						uni.previewImage({
							urls: res.tempFilePaths,
							longPressActions: {
								itemList: ['发送给朋友', '保存图片', '收藏'],
								success: function(data) {
									console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data
										.index + 1) + '张图片');
								},
								fail: function(err) {
									console.log(err.errMsg);
								}
							}
						});
					}
				});
			},
			showGongzhonghao() {
				uni.previewImage({
					urls: [
						'https://api.mucangye.a.58it.cn/opsli-boot/static/files/20241114/17321499394239623904UC26.jpg'
					],
					current: 0,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data
								.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			blur(e) {
				console.log(e);
				e.value
				this.qroomList.title = e.value
				this.listByDistance10()
			},
			/**
			 * 院子详情
			 * @param {Object} data
			 */
			yuanzixiangqing(data) {
				let id = data.id
				if (!isNull(data.id) && data.id.split(',').length == 2) {
					id = data.id.split(',')[1]
				}

				uni.navigateTo({
					url: "/pages/common/yuanzixiangqing/yuanzixiangqing?id=" + id
				})
			},
			/**
			 * 往期活动
			 * @param {Object} data
			 */
			wangqihuodong(data) {
				console.log(data.id);
				uni.navigateTo({
					url: "/pages/common/wangqihuodong/wangqihuodong?id=" + data.id
				})
			},
			setCurrentShop(e) {
				let currentShop = this.$storage.setItem("currentShop", e)
				this.showShop()
			},

			async getgundong() {
				let {
					data
				} = await getoptionsList({
					optionCode_EQ: "miniappconfiggundonglan",
				})
				console.log(data);
				data.viplist = JSON.parse(data.viplist.optionValue)
				this.$storage.setItem("miniappinfo", data)
				this.imgList = JSON.parse(data.miniappconfiggundonglan.optionValue)
				this.gonggao = data.gonggaoindex.optionValue
				this.wangqihuodongList = data.wangqihuodong
			},
			/**
			 * 显示店铺
			 */
			async listByDistance10() {
				// this.roomList = []
				let location = this.$storage.getItem("location")

				if (location == null) {
					await this.getLocation()
					location = this.$storage.getItem("location")
				}
				this.qroomList.lat = location.latitude
				this.qroomList.lon = location.longitude
				let {
					data
				} = await listByDistance10(this.qroomList)

				for (let s of data) {


					s.cangdiList = JSON.parse(s.cangdiList)
					// console.log(JSON.stringify(this.data.cangdiList));
					let ads = 10000
					for (let s of s.cangdiList) {
						if (parseFloat(s.price) < ads) {
							ads = parseFloat(s.price)
						}
					}
					s.miniPrice = ads
					s.image = s.image.split(",")
				}
				this.roomList = data
			},



			/**
			 * 充值功能
			 */
			recharge() {
				uni.navigateTo({
					url: "/pages/mine/recharge/recharge"
				})
			},
			clickBannerItem(item) {},
			change(e) {
				this.current = e.detail.current
			},

			init() {
				this.getgundong()
				this.getLocation()
				// this.getwangqihuodongList()
			},
			async getwangqihuodongList() {
				let {
					data
				} = await this.getLocation()
				this.wangqihuodongList = data.rows
			},
			selectStore() {
				// this.$refs.selectStorePopup.open()
			},
			async getLocation() {
				this.location.address = "加载中..."
				let asdf = await getLocation()
				this.location = asdf
				// this.showcustomPopup(true)
				this.$storage.setItem("location", this.location)
			},

			/**
			 * 点击顶部滚动栏
			 * @param {Object} data
			 */
			swiperClick(data) {
				console.log(data);
				if (data.fwblj == null) {
					return
				}
				//跳转文章页面
				uni.navigateTo({
					url: "/pages/common/textview/index?url=" + data.fwblj
				})
			},


		}
	}
</script>

<style lang="scss">
	page {
		// background-color: #FF6145; // background-size: 100% 400px;
	}

	.scroll-Y {
		// height: 250rpx;
	}

	.scroll-view_H {
		white-space: nowrap;

	}

	.scroll-view-item {
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;

		text-align: center;
		font-size: 36rpx;
	}

	.gundongtxt {
		position: absolute;
		bottom: 0px;
		padding: 4rpx 10rpx;
		color: #fff;
		display: flex;
		font-size: 29rpx;
		z-index: 2;
		width: 100%;
		background: rgba(0, 0, 0, 0.5);

	}

	.gundongtxt2 {
		position: absolute;

		top: 0px;
		// padding: 4rpx 10rpx;
		color: #fff;
		display: flex;
		font-size: 26rpx;
		z-index: 2;
		width: 150rpx;
		border-radius: 20upx 20upx 0px 0px;
		background: rgba(0, 0, 0, 0.5);
	}
</style>